<template>
	<view class="c-empty" :style="[emptyStyle]">
		<image class='empty-image' :style="[emptyImgStyle]" :src='emptyImgSource'>
		</image>
		<view class="empty-title" :style="[emptyTitleStyle]">
			{{emptyTitle}}
		</view>
		<slot></slot>
	</view>
</template>

<script>
    let _defaultEmptyImgSource;
    export function registerComponent(config) {
        _defaultEmptyImgSource = config.defaultEmptyImgSource;
    }
    import CommonComponentMixin from '../../mixins/common-component-mixin.js';
    export default {
        mixins: [CommonComponentMixin],
        props: {
            size: {
                type: String,
                default: "base",
                validator(value) {
                    return ["base", "sm", "lg"].includes(value)
                } 
            },
            direction: {
                type: String,
                default: "column",
                validator(value) {
                    return ["column", "row"].includes(value)
                }
            },
            emptyTitle: {
                type: String,
                default: "数据为空~"
            },
            emptyImg: {
                type: String,
                default: ""
            }
        },
        computed: {
            emptyImgSource: function() {
                return this.emptyImg || _defaultEmptyImgSource
            },
            emptyTitleStyle: function() {
                let result;
                switch(this.size) {
                    case "sm":
                        result = {
                            "font-size": "22rpx"
                        };
                        break;
                    case "lg":
                        result = {
                            "font-size": "32rpx"
                        };
                    break;
                    case "base":
                    default:
                        result = {
                            "font-size": "28rpx"
                        };
                        break;
                }
                switch (this.direction) {
                    case 'row':
                        result = {
                            ...result,
                            "margin-bottom": "0"
                        }
                        break;
                    default:
                        break;
                }
                return result;
            },
            emptyImgStyle: function() {
                let result;
                switch(this.size) {
                    case "sm":
                        result = {
                            width: "60rpx",
                            height: "60rpx"
                        }
                        break;
                    case "lg":
                        result = {
                            width: "240rpx",
                            height: "240rpx"
                        }
                        break;
                    case "base":
                    default:
                        result = {
                            width: "150rpx",
                            height: "150rpx"
                        }
                        break;
                }
                return result;
            },
            emptyStyle: function() {
                let result;
                switch(this.size) {
                    case "sm":
                        result = {
                            height: "150rpx"
                        }
                        break;
                    case "lg":
                        result = {
                            height: "700rpx"
                        }
                        break;
                    case "base":
                    default:
                        result = {
                            height: "350rpx"
                        }
                        break;
                }
                switch (this.direction) {
                    case "row":
                        result = {
                            ...result,
                            "flex-direction": "row"
                        }
                        break;
                    case "column":
                    default:
                        result = {
                            ...result,
                            "flex-direction": "column"
                        }
                }
                return result;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .c-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #F8F8F8;
        /* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */

		.empty-image {}

		.empty-title {
			color: $uni-text-color;
			margin-bottom: $uni-spacing-col-base;
		}
	}
</style>